<template>
  <div class="a">
      <div class="loginBox">
        <div class="d" :style="this.move">
            <!-- 忘记密码模块 -->
            <div class="c">
                <p style="margin-top: 0;margin-bottom: 5%;font-family: FZShuTi;font-size: 3em;color: #e8261d;">{{cloginBasicInfor.name}}</p>
                <div style="height: 2em">
                        <p :class="forgetPasswordState">忘记密码</p>
                </div>
                <div class="b">
                    <div style="height: auto;width: 100%;text-align: left">
                        <p style="margin-top: 5px;margin-bottom: 2px">手机号</p>
                        <el-input v-model="cforgetPasswordForm.phoneNumber"></el-input>
                        <p style="margin-top: 5px;margin-bottom: 2px">验证码</p>
                        <el-row>
                            <el-input v-model="cforgetPasswordForm.idenCode" style="width: 40%;float: left"></el-input>
                            <el-image style="width: 25%;float: right"></el-image>
                        </el-row>
                        <p style="margin-top: 5px;margin-bottom: 2px">新密码</p>
                        <el-input v-model="cforgetPasswordForm.password"></el-input>
                        <p style="margin-top: 5px;margin-bottom: 2px">确认密码</p>
                        <el-input v-model="cforgetPasswordForm.confirmPassword"></el-input>
                    </div>
                </div>
                <el-button type="primary" style="width: 100%;margin-bottom: 5px;font-size: 1.5em;padding-top: 5px;padding-bottom: 5px;" @click="resetPassword()">确定</el-button>
                <el-row>
                    <p style="float: right;color: #66B1FF;cursor: pointer;" @click="gotoLogin()">马上登录</p>
                    <p style="float: right">已有账户?</p>
                </el-row>
            </div>
            <!-- 登录模块 -->
            <div class="c">
                <p style="margin-top: 0;margin-bottom: 5%;font-family: FZShuTi;font-size: 3em;color: #e8261d;">{{cloginBasicInfor.name}}</p>
                <div style="height: 2em">
                        <p :class="passwordLoginState" @click="passwordLogin()">密码登录</p>
                        <p class="head-type" style="width: 10%">|</p>
                        <p :class="idenCodeLoginState" @click="idenCodeLogin()">验证码登录</p>
                </div>
                <div class="b">            
                    <div v-if="LoginWay" style="height: auto;width: 100%;text-align: left">
                        <p style="margin-top: 5px;margin-bottom: 2px">账号</p>
                        <el-input v-model="caccountLoginForm.name"></el-input>
                        <p style="margin-top: 5px;margin-bottom: 2px">密码</p>
                        <el-input v-model="caccountLoginForm.password"></el-input>
                        <p style="margin-top: 5px;margin-bottom: 2px">验证码</p>
                        <el-row>
                            <el-input v-model="caccountLoginForm.idenCode" style="width: 40%;float: left"></el-input>
                            <el-image style="width: 25%;float: right"></el-image>
                        </el-row>
                    </div>
                    <div v-if="!LoginWay" style="height: auto;width: 100%;text-align: left">
                        <p style="margin-top: 5px;margin-bottom: 2px">手机号</p>
                        <el-input v-model="cidenCodeLoginForm.phoneNumber"></el-input>
                        <p style="margin-top: 5px;margin-bottom: 2px">验证码</p>
                        <el-row style="margin-bottom: 20%">
                            <el-input v-model="cidenCodeLoginForm.idenCode" style="width: 40%;float: left"></el-input>
                            <el-image style="width: 25%;float: right"></el-image>
                        </el-row>
                    </div>
                </div>
                <el-button type="primary" style="width: 100%;margin-bottom: 5px;font-size: 1.5em;padding-top: 5px;padding-bottom: 5px;" @click="stuLogin">登录</el-button>
                <el-row>
                    <p style="float: left;color: #66B1FF;cursor: pointer;" @click="gotoResetPassword()">忘记密码</p>
                    <p style="float: right;color: #66B1FF;cursor: pointer;" @click="gotoRegister()">去注册</p>
                    <p style="float: right">没有账户?</p>
                </el-row>
            </div>
            <!-- 用户注册模块 -->
            <div class="c">
                <p style="margin-top: 0;margin-bottom: 5%;font-family: FZShuTi;font-size: 3em;color: #e8261d;">{{cloginBasicInfor.name}}</p>
                <div style="height: 2em">
                        <p :class="registerAccountState">用户注册</p>
                </div>
                <div class="b">
                    <div style="height: auto;width: 100%;text-align: left">
                        <p style="margin-top: 5px;margin-bottom: 2px">手机号</p>
                        <el-input v-model="cregisterForm.phoneNumber"></el-input>
                        <p style="margin-top: 5px;margin-bottom: 2px">验证码</p>
                        <el-row>
                            <el-input v-model="cregisterForm.idenCode" style="width: 40%;float: left"></el-input>
                            <el-image style="width: 25%;float: right"></el-image>
                        </el-row>
                        <p style="margin-top: 5px;margin-bottom: 2px">密码</p>
                        <el-input v-model="cregisterForm.password"></el-input>
                    </div>
                </div>
                <el-button type="primary" style="width: 100%;margin-bottom: 5px;font-size: 1.5em;padding-top: 5px;padding-bottom: 5px;" @click="stuRegister">注册</el-button>
                <el-row>
                    <p style="float: left;color: #66B1FF;cursor: pointer;" @click="gotoLogin()">去登录</p>
                    <p style="float: left">已有账户?</p>
                </el-row>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return{
            // 自定义组件的基本信息
            cloginBasicInfor: {},
            // 登陆的信息
            // 账户名登录
            caccountLoginForm: {
                name: '',
                password: '',
            },
            // 验证码登录
            cidenCodeLoginForm: {
                phontNumber: '',
                idenCode: ''
            },
            // 忘记密码的信息
            cforgetPasswordForm: {
                phoneNumber: '',
                idenCode: '',
                password: '',
                confirmPassword: ''
            },
            // 注册账号的信息
            cregisterForm: {
                phoneNumber: '',
                idenCode: '',
                password: ''
            },
            // 登录的方式,true为密码登录,false为验证码登录
            LoginWay: true,
            // 密码登录状态变化
            passwordLoginState: "head-type head-type-chosen",
            // 验证码登录状态变化
            idenCodeLoginState: "head-type",
            // 登录
            loginFlag: true,
            // 忘记密码
            forgetPasswordFlag: false,
            // 忘记密码状态变化
            forgetPasswordState: "head-type2",
            // 注册账号
            registerAccountFlag: false,
            // 注册账号状态变化
            registerAccountState: "head-type2",
        }        
    },
    props: {
        // 传递的参数是对象字典类型
        loginForm: Object,
        loginBasicInfor: Object
    },
    mounted() {
        this.cloginForm = this.loginForm,
        this.cloginBasicInfor = this.loginBasicInfor
    },
    watch: {
        LoginWay: function() {
            this.cforgetPasswordForm['phoneNumber']= '',
            this.cforgetPasswordForm['idenCode']= '',
            this.cforgetPasswordForm['password']= '',
            this.cforgetPasswordForm['confirmPassword']= '',
            this.cidenCodeLoginForm['phontNumber']= '',
            this.cidenCodeLoginForm['idenCode']= '',
            this.forgetPasswordState = "head-type2",
            this.registerAccountState = "head-type2"
            // 随着登陆方式的转变,切换字体状态
            if(this.LoginWay){
                this.passwordLoginState = "head-type head-type-chosen",
                this.idenCodeLoginState = "head-type"
            }
            else {
                this.passwordLoginState = "head-type",
                this.idenCodeLoginState = "head-type head-type-chosen"
            }
        },
        // 登录的标志
        loginFlag: function() {
            this.caccountLoginForm['name']= '',
            this.caccountLoginForm['password']= '',
            this.cidenCodeLoginForm['phontNumber']= '',
            this.cidenCodeLoginForm['idenCode']= ''
        },
        // 忘记密码的标志
        forgetPasswordFlag: function() {
            this.cforgetPasswordForm['phoneNumber']= '',
            this.cforgetPasswordForm['idenCode']= '',
            this.cforgetPasswordForm['password']= '',
            this.cforgetPasswordForm['confirmPassword']= '',
            this.cidenCodeLoginForm['phontNumber']= '',
            this.cidenCodeLoginForm['idenCode']= ''
        },
        // 注册的标志
        registerAccountFlag: function() {
            this.cregisterForm['phoneNumber']= '',
            this.cregisterForm['idenCode']= '',
            this.cregisterForm['phoneNumber']= ''
        }
    },
    computed: {
        // 偏移量
        move: function() {
            if(this.forgetPasswordFlag) return 'left: 0%'
            else if(this.registerAccountFlag) return 'left: -200%'
            else return 'left: -100%'
        }
    },
    methods: {
        sayhello() {
        },
        async stuLogin() {
            // const { data: res } = await this.$http.post('teacher/login', {
            //             "tel": this.caccountLoginForm.name,
            //             "password": this.caccountLoginForm.password
            // })
            // if (res.meta.status !== 200) {
            //     return this.$message.error('登录失败 帐号或密码错误!')
            // }
            this.$message.success('登录成功!')
            this.$router.push('./teachermainpage')
        },
        // 跳转密码登录界面
        passwordLogin() {            
            this.LoginWay = true
        },
        // 验证码登录
        idenCodeLogin() {
            this.LoginWay = false
        },
        // 重置密码
        resetPassword() {
            this.$http
                .put('teacher/update',{
                        "tel": this.cforgetPasswordForm.phoneNumber,
                        "password": this.cforgetPasswordForm.password
                }).then(response=> {
                    if(response.data.code == "200")
                        this.$message.success('修改密码成功!')
                    else
                        this.$message.error('修改密码失败!')
                        
                })
                .catch(function (error){
                    console.log(error)
                })
                .then(function (){
                    console.log("nihao")
                })     
        },
        // 注册
        stuRegister() {
            this.$http
                .post('teacher/create',{
                        "tel": this.cregisterForm.phoneNumber,
                        "password": this.cregisterForm.password
                }).then(response=> {
                    if(response.data.code == "200")
                        this.$message.success('注册成功!')
                    else
                        this.$message.error('注册失败!')
                })
                .catch(function (error){
                    console.log(error)
                })
                .then(function (){
                    console.log("nihao")
                })            
        },
        // 前往忘记密码界面
        gotoResetPassword() {
            this.loginFlag = false,
            this.forgetPasswordFlag = true,
            this.registerAccountFlag = false,
            this.forgetPasswordState = "head-type2 head-type2-chosen"
        },
        // 前往注册界面
        gotoRegister() {
            this.loginFlag = false,
            this.forgetPasswordFlag = false,
            this.registerAccountFlag = true,
            this.registerAccountState = "head-type2 head-type2-chosen"
        },
        // 前往登录界面
        gotoLogin() {
            this.loginFlag = true,
            this.forgetPasswordFlag = false,
            this.registerAccountFlag = false,
            this.forgetPasswordState = "head-type2",
            this.registerAccountState = "head-type2"
            
        }
    }
}
</script>

<style>
.a {
    display: flex;
    width: 100%;
    height: 100%;
    border: 1ch;
    text-align: center;
    overflow: hidden;
}
.b {
    display: flex;
    width: 100%;
    height: 60%;
    justify-content: center;
    align-items: center;
}
.c{
    /* display: inline-block; */
    width: 33.3%;
    height: 100%;
    padding-top: 3px;
    padding-bottom: 2%;
    padding-left: 5%;
    padding-right: 5%;
}
.d {
    display: flex;
    width: 300%;
    height: 100%;
    flex-direction: row;
    position: relative;
    transition: 0.5s;
}
.loginBox {
     width: 33.3%;
     height: 100%;
     overflow: hidden;
     border: 1px solid grey;
     border-radius: 5%;
}
.btn_noborder{
    border: 0px solid #DCDFE6;
}
.el-button--text {
    color: red;
}
.head-type {
    color: black;
    font-size: 1em;
    display: inline-block;
    transition: 0.4s all;
}
.head-type:hover {
    cursor: pointer;
}
.head-type-chosen {
    color: #0074E8;
    font-size: 1.5em;
}
.head-type2 {
    color: black;
    font-size: 1em;
    display: inline-block;
    transition: 0.9s all 0.4s;
}
.head-type2:hover {
    cursor: pointer;
}
.head-type2-chosen {
    color: #0074E8;
    font-size: 1.5em;
}

</style>